@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
 
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
 
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
 
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
 
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
 
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
 
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
 
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
 
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
 
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
 
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
 
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
 
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
 
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}
 
@layer base {
  * {
    @apply border-[color:hsl(var(--border))];
  }
  
  html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    height: 100%;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
    height: 100%;
  }

  /* 优化文字渲染 */
  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight text-gray-900;
    text-wrap: balance;
  }

  /* 优化段落文本 */
  p {
    @apply leading-relaxed text-gray-600;
    text-wrap: pretty;
  }
}

/* 自定义动画 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  animation: gradient 6s ease infinite;
  background-size: 400% 400%;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: theme('colors.gray.100');
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: theme('colors.gray.300');
  border-radius: 5px;
  border: 2px solid theme('colors.gray.100');
}

::-webkit-scrollbar-thumb:hover {
  background: theme('colors.gray.400');
}

/* 自定义选中文字样式 */
::selection {
  background-color: theme('colors.blue.100');
  color: theme('colors.blue.900');
}

/* 自定义组件样式 */
@layer components {
  /* 按钮基础样式 */
  .btn-base {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn-base bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
  }

  .btn-secondary {
    @apply btn-base bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500;
  }

  /* 卡片基础样式 */
  .card-base {
    @apply rounded-2xl bg-white shadow-sm transition-shadow duration-200 hover:shadow-md;
  }

  /* 渐变背景容器 */
  .gradient-bg {
    @apply relative overflow-hidden;
  }

  .gradient-bg::before {
    @apply absolute inset-0 -z-10 content-[''];
    background: radial-gradient(circle at top left, theme('colors.blue.50'), transparent 80%),
                radial-gradient(circle at bottom right, theme('colors.cyan.50'), transparent 80%);
  }

  /* 玻璃态效果 */
  .glassmorphism {
    @apply bg-white/70 backdrop-blur-md backdrop-saturate-150;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  }

  /* 响应式容器 */
  .container-custom {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  /* 标题组件 */
  .section-title {
    @apply text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl;
  }

  .section-subtitle {
    @apply mt-4 text-lg text-gray-600 sm:text-xl;
  }

  /* 图标包装器 */
  .icon-wrapper {
    @apply rounded-full p-2 transition-colors duration-200;
  }

  /* 特性标签 */
  .feature-tag {
    @apply inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10;
  }
}

/* 辅助工具类 */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .text-gradient {
    @apply bg-clip-text text-transparent;
  }

  .blur-backdrop {
    backdrop-filter: blur(8px);
  }
}